
<template>
  <div class="ui-search-box" id="searchBox"  v-bind:class="{'hs-search-box':hs}">
    <!--<el-button style="margin-left: 10px;" @click="btn_query" icon="el-icon-search" type="primary">查询</el-button>-->
    <!--<el-button @click="hs = !hs">高级筛选</el-button>-->

    <div  class="display-flex">
      <div class="flex-1">
        <div  v-if="!hs">
          <el-input class="value-search-box" style="flex-grow:1" v-model="value" placeholder="请输入"
                    prefix-icon="el-icon-search"></el-input>
        </div>
        <el-form   v-if="hs" label-position="right" label-width="80px" class="search-form">
          <el-row>
            <slot/>
          </el-row>
        </el-form>
      </div>
      <div class="search-btn-top"  style="margin-left: 10px;">
        <div style="display: inline-flex;justify-content: flex-end;width: 100%;max-width: 410px">
          <!--<el-button @click="btn_reset" icon="el-icon-refresh" size="small" type="primary">重置</el-button>-->
          <el-button v-if="hs" @click="btn_query" icon="el-icon-search" size="small" type="primary">查询</el-button>
          <el-button v-else @click="btn_query2" icon="el-icon-search" size="small" type="primary">查询</el-button>

          <el-button @click="hs = !hs"  size="small"  >
            高级筛选
            <i  class=" el-icon-arrow-down"  v-if="hs"></i>
            <i class="el-icon-arrow-up" v-else></i>
          </el-button>
        </div>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    props: {
      value: String,
    },
    data() {
      return {
        hs: false
      }
    },
    watch: {

        value:function(val){
            this.$emit('input', val);
        },

      // value(val) {
      //     this.$emit('input', val);
      // }
  },
    methods: {
        btn_query(evt) {
            this.hs = false;
            this.$emit('query', evt);
            // console.log("小黄")
        },
        btn_query2(evt) {
            this.$emit('quick-query', evt);
        },
        btn_reset(evt) {
            this.$emit('reset', evt);
        }
    }

  }
</script>
